<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleDialog('add')"
      >
        {{ $t("table.add") }}
      </el-button>
    </div>
    <div>
      <el-table
        :key="symbolKey"
        :data="tableData"
        border
        row-key="id"
        lazy
        :load="loadChildren"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          width="100"
        />
        <el-table-column label="岗位名称" prop="name" />
        <el-table-column
          :label="$t('table.actions')"
          align="center"
          width="250"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="info"
              @click="handleDialog('see', scope.row)"
            >{{ $t("table.see") }}</el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleDialog('edit', scope.row)"
            >{{ $t("table.edit") }}</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deleteRow(scope.row)"
            >{{ $t("table.delete") }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page.p"
        :limit.sync="page.ps"
        @pagination="getList"
      />
    </div>
    <PosDialog ref="posDialog" @refreshTab="getList" />
  </div>
</template>

<script>
import { postHandle } from '@/api'
import Pagination from '@/components/Pagination/index'
import checkPermission from '../../utils/permission'
import PosDialog from './components/posDialog.vue'
export default {
  name: 'PositionManage',
  components: { Pagination, PosDialog },
  data() {
    return {
      urls: {
        list: '/api/v1/welder-uac-second/base-profession-comb/list',
        delete: '/api/v1/welder-uac-second/base-profession-comb/remove-profession/'
      },
      tableData: [],
      page: {
        p: 1,
        ps: 10
      },
      total: 1,
      symbolKey: ''
    }
  },
  computed: {
    spaceId() {
      return this.$store.state.enterprise.entSpaceId
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    checkPermission,
    getList() {
      let params = {
        d: {
          filters: [
            { field: 'spaceId', operator: 'EQUALS', value: this.spaceId },
            { field: 'level', operator: 'EQUALS', value: 2 }
          ],
          page: this.page,
          retPage: true
        }
      }
      postHandle(this.urls.list, params).then((res) => {
        this.tableData = res.result
        this.total = res.page.ts
        this.symbolKey = Symbol(new Date().toString())
      })
    },
    loadChildren(tree, treeNode, resolve) {
      let params = {
        d: {
          filters: [
            {
              field: 'pid',
              operator: 'EQUALS',
              value: tree.id // 值
            }
          ]
        }
      }
      postHandle(this.urls.list, params).then((res) => {
        resolve(res.result)
      })
    },

    handleDialog(type, row) {
      this.$nextTick(() => {
        this.$refs.posDialog.clearForm()
        this.$refs.posDialog.handleDialog(type, row)
      })
    },

    deleteRow(row) {
      this.$confirm('此操作将永久删除该岗位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          postHandle(this.urls.delete + row.id, {}).then((res) => {
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped>
</style>
